<template>
	<div>
		<!-- <Header /> -->
		<div class="home_page pc_layer">
			<!-- v-loading="!webSocketStatus" element-loading-background="rgba(0, 0, 0, 0.8)" -->
			<div class="tips_box" :style="`--top: ${scrollPosition}px`">
				<div class="tips_item" v-for="(item,index) in showTips" :key="index">
					<img
						:src="require(`@/assets/images/home/${item.type == 1 ? 'success' : item.type == 3 ? 'warning' : 'error'}.png`)" />
					<p v-if="item.type == 4"> {{ item.msg }} </p>
					<p v-else>
						{{item.type == 1 ? $t('home.betSuccess') : item.type == 2 ? $t('home.frequent') : item.type == 3 ? $t('home.trading') : $t('home.binary') }}
					</p>
					<i class="el-icon-close" @click="handleDel(item)" />
				</div>
			</div>
			<!-- <div @click="addTips()">111</div> -->
			<div :style="`${routerName == 'bettingRecord' ? 'height: 100vh; overflow: hidden;' : ''}`">
				<div class="flex_box">
					<div class="k_box">
						<HomeTitle />
						<EchartsCom />
						<!-- <KechartNew /> -->
					</div>
					<div class="up_down_box">
						<UpDown />
					</div>
				</div>
				<TableCom />
			</div>
		</div>
	</div>
</template>

<script>
	import Cookie from 'vue-cookies'
	import HomeTitle from './components/homeTitle.vue'
	import EchartsCom from './components/Kechart.vue'
	import KechartNew from './components/KechartNew.vue'
	import UpDown from './components/upDown.vue'
	import TableCom from './components/table/index.vue'
	export default {
		name: 'HomePage',
		components: {
			HomeTitle,
			EchartsCom,
			KechartNew,
			UpDown,
			TableCom
		},
		data() {
			return {
				showBalance: true,
				topDom: undefined,
			}
		},
		computed: {
			webSocketStatus() {
				return this.$store.state.webSocketStatus
			},
			showTips() {
				return this.$store.state.showTips
			},
			routerName() {
				return this.$route.name
			}
		},
		watch: {},
		mounted() {
			// this.pageStatus = true;
			this.topDom = window.top[0] ? window.top[0].document.getElementsByClassName('main')[0] : window.top.document
				.getElementsByClassName('main')[0]
			// 内嵌页面获取滚动距离
			if (this.topDom) {
				this.topDom.addEventListener('scroll', this.handleScroll);
			} else {
				window.addEventListener('scroll', this.handleScroll);
			}
		},
		beforeDestroy() {
			// 移除滚动事件监听
			window.removeEventListener('scroll', this.handleScroll);
		},
		methods: {
			handleScroll() {
				if (this.topDom) {
					this.scrollPosition = this.topDom.pageYOffset || this.topDom.scrollTop;
				} else {
					this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
				}
				console.log('this.scrollPosition', this.scrollPosition);
			},
			handleDel(item) {
				this.$store.commit('closeTips', item.uid)
			},
			addTips() {
				this.$store.commit('onChangeTips', 1)
			}
		}
	}
</script>
<style lang="less" scoped>
	.home_page {
		position: relative;
		min-height: calc(100vh - 66px);
		display: flex;
		flex-direction: column;
		padding-bottom: 10px;
		padding-top: 18px;

		.flex_box {
			display: flex;
			margin-bottom: 30px;
			// align-items: center;

			.k_box {
				flex: 1;
			}

			.up_down_box {
				width: 408px;
				margin-left: 20px;
				flex-shrink: 0;
			}
		}

		// overflow: hidden;
		.tips_box {
			position: absolute;
			left: 50%;
			top: calc(55px + var(--top));
			transform: translateX(-50%);
			height: auto;
			z-index: 2010;
			transition: all .1s linear;

			.tips_item {
				padding: 10px;
				background-color: rgba(0, 0, 0, .7);
				border-radius: 6px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 14px;
				color: #fff;
				animation: hideTips 3s linear 1;
				animation-fill-mode: forwards;
				text-align: left;

				img {
					width: 24px;
					height: 24px;
					margin-right: 9px;
				}

				i {
					font-size: 14px;
					color: #fff;
					margin-left: 15px;
				}
			}

			@keyframes hideTips {
				0% {
					opacity: 1;
				}

				80% {
					opacity: 0.8;
				}

				100% {
					opacity: 0;
				}
			}

		}
	}
</style>
<style>
	body {
		overflow: auto;
	}
</style>